<template>
    <div class="vueAnimationPrc3">
      <div class='container'>
        <div class='unit'>
          <div class='ball ball1'></div>
          <div class='ball-shadow'></div>
        </div>
        <div class='unit'>
          <div class='ball ball2'></div>
          <div class='ball-shadow'></div>
        </div>
      </div>
      <div class='overlay'></div>
    </div>
</template>
<script lang="ts">
import { Vue, Options, Watch, Provide } from 'vue-property-decorator';

@Options({ components: {

} })
export default class VueAnimationPrc3 extends Vue {
  public msg = 'hover me';
  public beforeCreate() {
  }
}
</script>

<style lang="postcss" scoped>
.vueAnimationPrc3{
    background: #222;
    .container {
      width: 500px;
      height: 280px;
      margin: 10px auto;
      border: 1px solid #333;
      background: #111;
      overflow: hidden;
      .unit {
        float:left;
        width: 249px;
        height: 280px;
        background-color: #222426;
        /* @include filter-gradient(#222426, #111111, horizontal); // IE6-9 fallback on horizontal gradient
        @include background-image(radial-gradient(center, ellipse cover, #222426 0%,#111111 100%)); */
        &:first-child {
          border-right: 1px solid #333;
        }
      }
    }
    .overlay {
      position: absolute;
      left: 50%;
      top: 10px;
      width: 500px;
      height: 280px;
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/grain.png");
      margin-left: -250px;
      z-index: 1000;
      opacity: 0.11;
      animation: filmgrain 0.4s steps(3) infinite;
    }

    @keyframes filmgrain{

    }
}
</style>
